<template>
  <div class>
    <div class="q_tip" v-if="tip.key">
      <p class="rpx28 app_col">
        {{tip.key}}
        <text class="rpx28 col282">{{tip.tip}}</text>
      </p>
      <p v-if="tip.tip2" class="rpx28 col2B0FFF">{{tip.tip2}}</p>
    </div>

    <template v-if="sel_data.type=='radio'">
      <radio-group class="q_it_rd" @change="radioChange">
        <div class="q_it_rdbox" v-for="(it,index) in sel_data.item" :key="index">
          <label>
            <radio :checked="index+1 == sel_data.value" :value="index+1+''" />
            {{it.name}}
          </label>
          <textarea
            auto-height
            class="tar rpx28 col3A4060"
            v-if="it.qt"
            placeholder="请注明"
            placeholder-class="rpx28 colB3B"
          ></textarea>
        </div>
      </radio-group>
    </template>

    <template v-else-if="sel_data.type=='input'">
      <input
        v-for="(it,index) in sel_data.item"
        :key="it.name"
        class="q_number rpx28 col3A4060"
        :class="{'tip2':tip.tip2}"
        :type="it.type"
        cursor-spacing="10"
        @input="input($event,index)"
        :value="sel_data.value"
        :placeholder="it.name"
        placeholder-class="rpx28 colB3B"
      />
    </template>

    <template v-else-if="sel_data.type=='input_in'">
      <div class="inbox">
        <p v-if="tip.tip3" class="in_tip rpx28 col2B0FFF">{{tip.tip3}}</p>
        <div class="in_it" v-for="(it,index) in sel_data.item" :key="index">
          <p class="rpx28 colB3B">{{it.tp}}</p>
          <input
            class="q_number rpx28 col3A4060"
            :type="it.type"
            cursor-spacing="10"
            :placeholder="it.name"
            @input="input_in($event,index)"
            :value="it.value"
            placeholder-class="rpx28 colB3B"
          />
        </div>
        <div class="in_num">
          <p class="rpx28 col666">
            剩余：
            <span class>0</span>
          </p>
          <p class="rpx28 col666">
            总计：
            <span class="rpx28 app_col">3</span>
          </p>
        </div>
      </div>
    </template>

    <template v-else-if="sel_data.type=='img'">
      <div class="upload">
        <div class="up_it" v-for="(it,index) in sel_data.item" :key="index">
          <image class="up_img" :src="it" mode="aspectFit" />
          <image class="up_xx" src="../../static/q6.png" mode="aspectFit" @click="delImg(index)" />
        </div>
        <navigator class="up_it" @click="getImg">
          <image src="../../static/q7.png" mode="aspectFit" />
          <p class="rpx22 col3A4060">上传照片</p>
        </navigator>
      </div>
    </template>

    <div style="height: 222upx;"></div>
    <div class="but88box">
      <navigator @click="toNext" class="but88 rpx32 colfff app_bg">下一步</navigator>
    </div>

    <uni-popup
      class="u_p"
      :show="type === 'center'"
      position="middle"
      mode="fixed"
      msg
      @hidePopup="togglePopup('')"
    >
      <div class="show_up">
        <img class="lx_img" src="static/s4.png" @click="togglePopup('')"/>
        <div class="lx_title">
          <p class="rpx28 app_col omit2">
            * Q20.
            <text class="rpx28 col282">请查看该店铺是否还有其他冷风柜？</text>
          </p>
        </div>
        <div class="lx_but">
          <navigator @click="toNo" class="rpx34 colfff">无</navigator>
          <navigator @click="toYes" class="rpx34 colfff app_bg">有</navigator>
        </div>
      </div>
    </uni-popup>

    <uni-popup
      class="u_p ice"
      :show="type === 'top'"
      position="top"
      mode="fixed"
      msg
      @hidePopup="togglePopup('')"
    >
      <div class="ice_box">
        <navigator class="ice_it rpx28 col282">
          二次陈列1
          <img class="ice_del" src="../../static/q3.png" />
        </navigator>
        <navigator class="ice_it rpx28 col282">
          二次陈列2
          <img class="ice_del" src="../../static/q3.png" />
        </navigator>
        <navigator class="ice_it rpx28 app_col active">
          二次陈列3
          <img class="ice_del" src="../../static/q3.png" />
        </navigator>
        <navigator class="ice_add rpx32 colB3B">
          <img class="ice_del" src="../../static/q4.png" />添加二次陈列
        </navigator>
      </div>
    </uni-popup>
  </div>
</template>

<script>
import mixins from "@/mixins";
import uniPopup from "../../components/uni-popup/uni-popup.vue";
export default {
  components: {
    uniPopup
  },
  props: {
    tip: {
      type: Object,
      default: {}
    },
    sel_data: {
      type: Object,
      default: {
        type: ""
      }
    },
    sel_index: {
      type: Number,
      default: {
        type: ""
      }
    }
  },
  data() {
    return {
      type: ""
    };
  },
  onBackPress() {
    if (this.type !== "") {
      this.type = "";
      return true;
    }
  },
  methods: {
    togglePopup(type) {
      this.type = type;
    },
    toNext() {
      if (this.sel_data.type == "input_in") {
        this.type = "center";
      } else {
        this.$emit("toNext");
      }
    },
    toYes() {
      this.togglePopup("");
      this.$emit("toYes");
    },
    toNo() {
      this.togglePopup("");
      this.$emit("toNo");
    },
    radioChange(val) {
		console.log(val)
      this.$emit("radioChange", [val.detail.value, this.sel_index]);
    },
    input(e, index) {
      this.$emit("input", e.detail.value, index);
    },
    input_in(e, index) {
      this.$emit("input_in", [e.detail.value, index]);
    },
    delImg(index) {
      this.$emit("delImg",index);
    },
    getImg() {
      this.$emit("getImg");
    }
  }
};
</script>

<style scoped>
.q_number {
  border: none;
  outline: none;
}
.q_it_rd {
  min-width: 86upx;
  margin: 10upx 54upx 0 124upx;
  display: flex;
  flex-wrap: wrap;
  min-height: 140upx;
}
.q_it_rdbox {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.q_it_rd label {
  width: 100%;
  display: flex;
  min-height: 40upx;
  line-height: 40upx;
  margin-top: 0;
}
.q_it_rd label {
  margin-bottom: 24upx;
}
/* .q_it_rd radio{width: 36upx;height: 36upx;transform:scale(0.8);margin:2upx 26upx auto 0;} */
.tar {
  background: #fff;
  margin-left: 58upx;
  width: 100%;
  padding: 24upx 32upx;
  min-height: 178upx;
  line-height: 40upx;
}

.q_tip p:nth-of-type(2) {
  text-indent: 0;
  margin: 28upx auto 0upx 14upx;
}

.q_number {
  margin-left: 57upx;
  margin-top: 32upx;
  text-align: center;
  width: 128upx;
  height: 60upx;
  background: rgba(234, 234, 234, 1);
  border-radius: 4upx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.q_number.tip2 {
  margin-left: 50upx;
  margin-top: 0upx;
}

.inbox {
  background: #fff;
  padding-top: 1px;
}
.in_it {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 32upx 60upx 0 37upx;
}
.in_it .q_number {
  width: 200upx;
  margin: 0;
}
.in_num {
  display: flex;
  justify-content: center;
  align-items: center;
}
.in_num > p {
  margin: 102upx 80upx 43upx;
}
.in_num > p > span {
  margin-left: 20upx;
}
.in_tip {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 30upx auto 62upx;
}

.upload {
  display: flex;
  flex-wrap: wrap;
  margin: 72upx 56upx;
}
.up_it {
  position: relative;
  width: 160upx;
  height: 160upx;
  margin-left: 33upx;
  margin-bottom: 33upx;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
/* .up_it:first-child {
  margin-left: 0upx;
} */
.up_it .up_img {
  display: block;
  width: 160upx;
  height: 160upx;
  background: #fff;
}
.up_it:last-child {
  border: 2upx dashed rgba(205, 205, 205, 1);
  border-radius: 8upx;
}
.up_it:last-child image {
  display: block;
  width: 32upx;
  height: 32upx;
  margin-bottom: 10upx;
}
.up_it:last-child p {
  display: block;
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 35upx;
}
.up_it .up_xx {
  display: block;
  width: 40upx;
  height: 40upx;
  position: absolute;
  top: -12upx;
  right: -12upx;
}

.but88box {
  position: fixed;
  width: 100%;
  bottom: 0;
  background: #f7f7f7;
}
.but88 {
  margin: 40upx 32upx 102upx;
  height: 80upx;
  width: unset;
}

.u_p >>> .uni-popup {
  height: unset !important;
  border-radius: 8upx;
  padding: 0;
}
.ice >>> .uni-popup {
  border-radius: 0upx;
}

.ice_box {
  width: 100%;
}
.ice_it {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 72upx;
  padding: 0 45upx 0 49upx;
}
.ice_it .ice_del {
  width: 32upx;
  height: 32upx;
  display: none;
}
.ice_it.active {
  background: #f1f1f1;
}
.ice_it.active .ice_del {
  display: block;
}
.ice_add {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 92upx;
}
.ice_add img {
  width: 40upx;
  height: 40upx;
  margin-right: 14upx;
}

page >>> .uni-radio-input {
  margin-right: 26upx;
  box-sizing: border-box;
  width: 36upx;
  height: 36upx;
  background-color: #fff !important;
  border-color: #cdc2c2 !important;
}
page >>> uni-radio .uni-radio-input.uni-radio-input-checked:before {
  content: "";
  width: 24upx;
  height: 24upx;
  background: rgba(251, 0, 26, 1);
  border-radius: 50%;
}
</style>